<template>
  <div>
    <TopSwiper :tops="tops"></TopSwiper>
    <Card :key="book.id" v-for='book in books' :book='book'></Card>
    <p v-if="!more" class="no-data">没有更多数据了</p>
  </div>
</template>
<script>
import { get, showLoading, hideLoading } from '@/utils'
import Card from '@/components/Card'
import TopSwiper from '@/components/TopSwiper'

export default {
  data () {
    return {
      books: [],
      page: 0,
      size: 8,
      more: true,
      tops: []
    }
  },
  components: {
    Card,
    TopSwiper
  },
  methods: {
    async getList (init) {
      if (init) {
        this.page = 0
        this.more = true
      }
      showLoading()
      const books = await get('/weapp/booklist', {page: this.page, size: this.size})
      if (books.data.list < this.size && this.page > 0) {
        this.more = false
      }
      if (init) {
        this.books = books.data.list
      } else {
        // this.books = this,books.concat(books.data.list)
        console.log(this.books)
        // this.books.push(books.data.list)
        // Array.prototype.push.apply(this.books,books.data.list)
        this.books = this.books.concat(books.data.list)
        console.log(this.books)
      }
      hideLoading()
    },
    async getTop () {
      const tops = await get('/weapp/top')
      this.tops = tops.data.list
    }
  },
  mounted () {
    this.getList(true)
    this.getTop()
  },
  onPullDownRefresh () {
    this.getList(true)
    this.getTop()
  },
  onReachBottom () {
    if (this.more) {
      this.page += 1
      this.getList()
    }
  }
}
</script>
<style>

</style>

